define([
    'app'
], function (app) {
    // 手风琴案例
    app.directive('btstAccordion', function () {
        return {
            restrict: 'E', // 元素
            transclude: true, //是否可以嵌套
            replace: true,
            scope: {},
            template: "<div class='accordion' ng-transclude></div>",
            link: function (scope, element, attrs) {
                //确保accordion拥有id
                var id = element.attr('id');
                if (!id) {
                    id = "btst-acc" + scope.$id;
                    element.attr("id", id);
                }
                // set data-parent and href attributes on accordion-toggle elements
                var arr = element.find(".accordion-toggle");
                for (var i = 0; i < arr.length; i++) {
                    $(arr[i]).attr("data-parent", "#" + id);
                    $(arr[i]).attr("href", "#" + id + "collapse" + i)
                }
                arr = element.find(".accordion-body");
                $(arr[0]).addClass("in"); // expand first pane
                for (var i = 0; i < arr.length; i++) {
                    $(arr[i]).attr("id", id + "collapse" + i);
                }
            },
            controller: function () {//子元素将检测父元素的类型和controller

            }
        }
    })
    app.directive('btstPane', function () {
        return {
            require: "^btstAccordion",
            restrict: "E",
            transclude: true,
            replace: true,
            scope: {
                title: "@",//变量
                category: "=",// 双向绑定
                order: "="//双向绑定
            },
            template: "<div class='accordion-group' >" +
                "  <div class='accordion-heading'>" +
                "    <a class='accordion-toggle' data-toggle='collapse'> {{category.name}} - </a>" +

                "  </div>" +
                "<div class='accordion-body collapse'>" +
                "  <div class='accordion-inner' ng-transclude></div>" +
                "  </div>" +
                "</div>",
            link: function (scope, element, attrs) {
                scope.$watch("title", function () {
                    // NOTE: this requires jQuery (jQLite won't do html)
                    var hdr = element.find(".accordion-toggle");
                    hdr.html(scope.title);
                });
            }
        }
    })
    // 下拉指令
    app.directive('resizingV', function($timeout){
        return {
            restrict : 'C',
            link: function(scope, ele, attrs){
                var obj = null;
                $timeout.cancel(obj)
                obj = $timeout(function(){
                   angular.element(ele).find('.resize-vertical').on('mousedown', function(e){
                       var vy = e.clientY;
                       var _this = $(this);
                       var resize = _this.parent().find('.resize');
                       var resizeH = resize.height();
                       $(document).on('mousemove', function(e){
                           var vvy = e.clientY;
                           if(!vvy)return;
                           var dist = vy - vvy;
                           if(!dist) return;
                           resize.height(resizeH - dist - 10);

                       })
                   })
                   $(document).on('mouseup', function(){
                       $(this).off('mousemove');
                   })

                },100)
            }
        }

    })
    // 上拉指令
    app.directive('resizingH', function($timeout){
         return {
            restrict : 'C',
            link: function(scope, ele, attrs){
                var obj = null;
                $timeout.cancel(obj);
                obj =  $timeout(function(){
                   angular.element(ele).find('.resize-horizontal').on('mousedown', function(e){
                       var vy = e.clientX;
                       var _this = $(this);
                       var resize = _this.parent();
                       var resizeH = resize.width();
                       $(document).on('mousemove', function(e){
                           var vvy = e.clientX;
                           if(!vvy)return;
                           var dist = vy - vvy;
                           if(!dist) return;
                           resize.width(resizeH - dist - 10);
                       })
                   })
                   $(document).on('mouseup', function(){
                       $(this).off('mousemove');
                   })

                },100)
            }
        }

    })

});